﻿@{
    ViewBag.Title = "Dashboard Cuisinier";
    Layout = "~/Views/Shared/_Layout_home.cshtml";
}

@section css{
    <link href="@Url.Content("~/Content/css/bootstrap-responsive.css")" rel="stylesheet">
    <link href="@Url.Content("~/Content/css/highchart.css")" rel="stylesheet">
    <link href="@Url.Content("~/Content/css/style_dash.css")" rel="stylesheet">
}
 
            <div class="span6" >
              <div id="container1" class="highchart"></div>
            </div> 

            <div class="span6" >   
              <div id="container2" class="highchart"></div>
            </div>  

            <div class="span6" >   
              <div id="container3" class="highchart"></div>
            </div> 

            <div class="span6" >   
              <div id="container4" class="highchart"></div>
            </div>     
                             
            </div>
          </div><!--/span-->
           
          <div class="span3">
            <h2>Analyses</h2>
              <div class="well sidebar-nav">
              <ul class="nav nav-list">
                <li class="nav-header">Dashboard</li>
                <li><a href="Dashboard">Dashboard Journalier</a></li>
                <li><a href="Dashboard_hebdo">Dashboard hebdomadaire</a></li>
                <li><a href="Dashboard_mens">Dashboard Mensuel</a></li>
                <li><a href="Dashboard_annu">Dashboard Annuel</a></li>
                <li class="nav-header">Rapports des Employées</li>
                <li><a href="Server">Dashboard Serveur</a></li>
                <li class="active"><a href="Cook">Dashboard Cuisinier</a></li>
              </ul>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
@section script{
    <script src="@Url.Content("~/Content/js/highcharts.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/js/modules/exporting.js")" type="text/javascript"></script>
}
    <!-- Container 1 -->
  		<script type="text/javascript">
  		    $(function () {
  		        var chart;
  		        $(document).ready(function () {
  		            chart = new Highcharts.Chart({
  		                chart: {
  		                    renderTo: 'container1'
  		                },
  		                title: {
  		                    text: 'Nombres de Cuisinier par Restaurant'
  		                },
  		                xAxis: {
  		                    categories: ['Cuisiniers']
  		                },
  		                tooltip: {
  		                    formatter: function () {
  		                        var s;
  		                        if (this.point.name) { // the pie chart
  		                            s = '' +
                            this.point.name + ': ' + this.y + ' fruits';
  		                        } else {
  		                            s = '' +
                            this.x + ': ' + this.y;
  		                        }
  		                        return s;
  		                    }
  		                },
  		                labels: {
  		                    items: [{
  		                        html: 'Cuisiniers par restaurant',
  		                        style: {
  		                            left: '40px',
  		                            top: '8px',
  		                            color: 'black'
  		                        }
  		                    }]
  		                },
  		                series: [{
  		                    type: 'column',
  		                    name: 'Grenoble',
  		                    data: [15]
  		                }, {
  		                    type: 'column',
  		                    name: 'Lyon',
  		                    data: [20]
  		                }, {
  		                    type: 'column',
  		                    name: 'Eybens',
  		                    data: [10]
  		                }, {
  		                    type: 'spline',
  		                    name: 'Moyenne',
  		                    data: [15]
  		                }, {
  		                    type: 'pie',
  		                    name: 'Total consumption',
  		                    data: [{
  		                        name: 'Grenoble',
  		                        y: 13,
  		                        color: '#4572A7' 
  		                    }, {
  		                        name: 'Lyon',
  		                        y: 23,
  		                        color: '#AA4643' 
  		                    }, {
  		                        name: 'Eybens',
  		                        y: 19,
  		                        color: '#89A54E' 
  		                    }],
  		                    center: [100, 80],
  		                    size: 100,
  		                    showInLegend: false,
  		                    dataLabels: {
  		                        enabled: false
  		                    }
  		                }]
  		            });
  		        });

  		    });
		</script>

    <!-- Container 2 -->
      <script type="text/javascript">
          $(function () {
              var chart;
              $(document).ready(function () {
                  chart = new Highcharts.Chart({
                      chart: {
                          renderTo: 'container2',
                          type: 'column'
                      },
                      title: {
                          text: 'Nombre de commandes Journalières'
                      },
                      subtitle: {
                          text: 'Source: You Food'
                      },
                      xAxis: {
                          categories: ['<span class="date"></span>']
                      },
                      yAxis: {
                          title: {
                              text: 'Chiffre d\'affaire (en Euros)'
                          }
                      },
                      tooltip: {
                          enabled: false,
                          formatter: function () {
                              return '<b>' + this.series.name + '</b><br/>' +
                              this.x + ': ' + this.y + '°C';
                          }
                      },
                      plotOptions: {
                          line: {
                              dataLabels: {
                                  enabled: true
                              },
                              enableMouseTracking: false
                          }
                      },
                      series: [{
                          name: 'Paris',
                          data: [450]
                      }, {
                          name: 'Londres',
                          data: [268]
                      }, {
                          name: 'Grenoble',
                          data: [125]
                      }, {
                          name: 'Lyon',
                          data: [179]

                      }]
                  });
              });

          });
    </script>